<style lang="less">
    @import "./userManage.less";
</style>
<template>
    <div class="search">
        <Row>
            <Col>
                <Card>
                    <Row>
                        <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
                            <Form-item label="用户名称" prop="username">
                                <Input type="text" v-model="searchForm.username" clearable placeholder="请输入用户名"
                                       style="width: 200px"/>
                            </Form-item>
                            <Form-item label="部门" prop="department">
                                <Cascader v-model="selectDep" :data="department" :load-data="loadData"
                                          @on-change="handleChangeDep" change-on-select filterable
                                          placeholder="请选择或输入搜索部门" style="width: 200px"></Cascader>
                            </Form-item>
                            <span v-if="drop">
                            <Form-item label="手机号" prop="mobile">
                              <Input type="text" v-model="searchForm.mobile" clearable placeholder="请输入手机号"
                                     style="width: 200px"/>
                            </Form-item>
                              <Form-item label="邮箱" prop="email">
                                <Input type="text" v-model="searchForm.email" clearable placeholder="请输入邮箱"
                                       style="width: 200px"/>
                              </Form-item>
                              <Form-item label="性别" prop="sex">
                                <Select v-model="searchForm.sex" placeholder="请选择" clearable style="width: 200px">
                                  <Option value="0">女</Option>
                                  <Option value="1">男</Option>
                                </Select>
                              </Form-item>
                              <Form-item label="用户类型" prop="type">
                                <Select v-model="searchForm.type" placeholder="请选择" clearable style="width: 200px">
                                  <Option value="0">普通用户</Option>
                                  <Option value="1">管理员</Option>
                                </Select>
                              </Form-item>
                              <Form-item label="用户状态" prop="status">
                                <Select v-model="searchForm.status" placeholder="请选择" clearable style="width: 200px">
                                  <Option value="1">正常</Option>
                                  <Option value="0">禁用</Option>
                                </Select>
                              </Form-item>
                              <Form-item label="创建时间">
                                <DatePicker v-model="selectDate" type="daterange" format="yyyy-MM-dd" clearable
                                            @on-change="selectDateRange" placeholder="选择起始时间"
                                            style="width: 200px"></DatePicker>
                              </Form-item>
                            </span>
                            <Form-item style="margin-left:-35px;" class="br">
                                <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                                <Button @click="handleReset">重置</Button>
                                <a class="drop-down" @click="dropDown">{{dropDownContent}}
                                    <Icon :type="dropDownIcon"></Icon>
                                </a>
                            </Form-item>
                        </Form>
                    </Row>
                    <Row class="operation">
                        <Button @click="add" type="primary" v-if="permTypes.length > 0" v-has="'add'" icon="md-add">添加用户</Button>
                        <Button @click="delAll" v-if="permTypes.length > 0" v-has="'delete'" icon="md-trash">批量删除</Button>
                        <Dropdown @on-click="handleDropdown">
                            <Button>
                                更多操作
                                <Icon type="md-arrow-dropdown"/>
                            </Button>
                            <DropdownMenu slot="list">
                                <DropdownItem name="refresh">刷新</DropdownItem>
                                <DropdownItem name="exportData">导出所选数据</DropdownItem>
                                <DropdownItem name="exportDataAll">导出全部数据</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </Row>
                    <Row>
                        <Alert show-icon>
                            已选择 <span class="select-count">{{selectCount}}</span> 项
                            <a class="select-clear" @click="clearSelectAll">清空</a>
                        </Alert>
                    </Row>
                    <Row>
                        <Table :loading="loading" border :columns="columns" :data="data" sortable="custom"
                               @on-sort-change="changeSort" @on-selection-change="showSelect" ref="table"></Table>
                        <Table :columns="columns" :data="exportData" ref="exportTable" style="display:none"></Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
                              @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]"
                              size="small" show-total show-elevator show-sizer></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
        <Modal :title="modalTitle" v-model="userModalVisible" :mask-closable='false' :width="500"
               :styles="{top: '30px'}">
            <Form ref="userForm" :model="userForm" :label-width="70" :rules="userFormValidate">
                <FormItem label="用户名" prop="username">
                    <Input v-model="userForm.username" autocomplete="off"/>
                </FormItem>
                <FormItem label="密码" prop="password" v-if="modalType===0" :error="errorPass">
                    <Input type="password" v-model="userForm.password" autocomplete="off"/>
                </FormItem>
                <FormItem label="邮箱" prop="email">
                    <Input v-model="userForm.email"/>
                </FormItem>
                <FormItem label="手机号" prop="mobile">
                    <Input v-model="userForm.mobile"/>
                </FormItem>
                <FormItem label="昵称" prop="nickname">
                    <Input v-model="userForm.nickname" autocomplete="off"/>
                </FormItem>
                <FormItem label="性别" prop="sex">
                    <RadioGroup v-model="userForm.sex">
                        <Radio :label="1">男</Radio>
                        <Radio :label="0">女</Radio>
                    </RadioGroup>
                </FormItem>
                <Form-item label="所属部门" prop="departmentTitle">
                    <Poptip trigger="click" placement="right" title="选择部门" width="250">
                        <div style="display:flex;">
                            <Input v-model="userForm.departmentTitle" readonly style="margin-right:10px;"/>
                            <Button icon="md-trash" @click="clearSelectDep">清空已选</Button>
                        </div>
                        <div slot="content">
                            <Tree :data="dataDep" :load-data="loadDataTree" @on-select-change="selectTree"></Tree>
                            <Spin size="large" fix v-if="loading"></Spin>
                        </div>
                    </Poptip>
                </Form-item>
                <FormItem label="用户类型" prop="type">
                    <Select v-model="userForm.type" placeholder="请选择">
                        <Option :value="0">普通用户</Option>
                        <Option :value="1">管理员</Option>
                    </Select>
                </FormItem>
                <FormItem label="角色分配" prop="roles">
                    <Select v-model="userForm.roles" multiple>
                        <Option v-for="item in roleList" :value="item.id" :key="item.id" :label="item.name">
                            <!-- <div style="display:flex;flex-direction:column"> -->
                            <span style="margin-right:10px;">{{ item.name }}</span>
                            <span style="color:#ccc;">{{ item.description }}</span>
                            <!-- </div> -->
                        </Option>
                    </Select>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancelUser">取消</Button>
                <Button type="primary" :loading="submitLoading" @click="submitUser">提交</Button>
            </div>
        </Modal>

        <Modal :title="passwordModalTitle" v-model="passwordModalVisible" :mask-closable='false' :width="500"
               :styles="{top: '30px'}">
            <Form ref="passwordForm" :model="passwordForm" :label-width="70" :rules="passwordFormValidate">
                <FormItem label="密码" prop="password" :error="errorPass">
                    <Input type="password" v-model="passwordForm.password" autocomplete="off"/>
                </FormItem>
                <FormItem label="确认密码" prop="confirmPassword" :error="errorPass">
                    <Input type="password" v-model="passwordForm.confirmPassword" autocomplete="off"/>
                </FormItem>
                <input type="hidden" v-model="passwordForm.id" />
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancelPassword">取消</Button>
                <Button type="primary" :loading="submitLoading" @click="submitPassword">提交</Button>
            </div>
        </Modal>

    </div>
</template>

<script>
    import {
        initDepartment,
        loadDepartment,
        getUserListData,
        getAllRoleList,
        addUser,
        editUser,
        enableUser,
        disableUser,
        deleteUser,
        updateAdminPassword
    } from "@/api/index";
    import moment from 'moment';

    export default {
        name: "user-manage",
        data() {
            const validatePassword = (rule, value, callback) => {
                var reg = /(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])[A-Za-z0-9]/;
                if (!reg.test(value) || value.length < 6 || value.length > 16) {
                    callback(new Error("密码必须6-16位大小写字母和数字组合"));
                } else {
                    callback();
                }
            };

            const validateMobile = (rule, value, callback) => {
                var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
                if (!reg.test(value)) {
                    callback(new Error("手机号格式错误"));
                } else {
                    callback();
                }
            };

            const validateConfirmPassword = (rule, value, callback) => {
                if (value == '') {
                    callback(new Error('确认密码不能为空'));
                } else if (this.passwordForm.password != value) {
                    callback(new Error('确认密码错误'));
                } else {
                    callback();
                }
            };

            return {
                accessToken: {},
                loading: true,
                drop: false,
                dropDownContent: "展开",
                dropDownIcon: "ios-arrow-down",
                selectCount: 0,
                selectList: [],
                department: [],
                selectDep: [],
                dataDep: [],
                permTypes: [],
                searchForm: {
                    username: "",
                    departmentId: "",
                    mobile: "",
                    email: "",
                    sex: "",
                    type: "",
                    status: "",
                    pageNumber: 1,
                    pageSize: 10,
                    sort: "createdAt",
                    order: "desc",
                    startDate: "",
                    endDate: "",
                },
                selectDate: null,
                modalType: 0,
                userModalVisible: false,
                passwordModalVisible: false,
                modalTitle: "",
                passwordModalTitle: "修改密码",
                userForm: {
                    sex: 1,
                    type: 0,
                    roles: [],
                    password: "",
                    username: "",
                    email: "",
                    mobile: "",
                    nickname: "",
                    departmentId: "",
                    departmentTitle: ""
                },
                passwordForm: {
                    password: "",
                    confirmPassword: "",
                    id: 0
                },
                userRoles: [],
                roleList: [],
                errorPass: "",
                userFormValidate: {
                    username: [
                        {required: true, message: "账号不能为空", trigger: "blur"}
                    ],
                    mobile: [
                        {required: true, message: "手机号不能为空", trigger: "blur"},
                        {validator: validateMobile, trigger: "blur"}
                    ],
                    email: [
                        {required: true, message: "请输入邮箱地址"},
                        {type: "email", message: "邮箱格式不正确"}
                    ],
                    password: [
                        {required: true, message: "密码不能为空"},
                        {validator: validatePassword, trigger: "blur"},
                    ]
                },
                passwordFormValidate: {
                    password: [
                        {required: true, message: "密码不能为空", trigger: "blur"},
                        {validator: validatePassword, trigger: "blur"}
                    ],
                    confirmPassword: [
                        {validator: validateConfirmPassword, trigger: "blur"}
                    ],
                },
                submitLoading: false,
                columns: [
                    {
                        type: "selection",
                        width: 60,
                        align: "center",
                        fixed: "left"
                    },

                    {
                        title: "头像",
                        key: "avatar",
                        align: "center",
                        minWidth: 90,
                        render: (h, params) => {
                            if (params.row.avatar) {
                                return h('div', {
                                    attrs: {
                                        style: ''
                                    },
                                }, [
                                    h('img', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        attrs: {
                                            src: params.row.avatar,
                                            style: 'width: 100%; border-radius: 2px;'
                                        },
                                        style: "text-align:center;margin:10px auto;",
                                    }),
                                ]);
                            } else {
                                return h('div', '-');
                            }
                        }
                    },

                    {
                        title: "用户名",
                        key: "username",
                        minWidth: 100,
                    },
                    {
                        title: "昵称",
                        key: "nickname",
                        minWidth: 100,
                    },
                    {
                        title: "所属部门",
                        key: "departmentTitle",
                        minWidth: 120,
                    },
                    {
                        title: "手机",
                        key: "mobile",
                        minWidth: 120,
                    },
                    {
                        title: "邮箱",
                        key: "email",
                        minWidth: 120,
                    },
                    {
                        title: "性别",
                        key: "sex",
                        minWidth: 70,
                        align: "center",
                        render: (h, params) => {
                            let re = "";
                            if (params.row.sex === 1) {
                                re = "男";
                            } else if (params.row.sex === 0) {
                                re = "女";
                            }
                            return h("div", re);
                        }
                    },
                    {
                        title: "用户类型",
                        key: "type",
                        align: "center",
                        minWidth: 100,
                        render: (h, params) => {
                            let re = "";
                            if (params.row.type === 1) {
                                re = "管理员";
                            } else if (params.row.type === 0) {
                                re = "普通用户";
                            }
                            return h("div", re);
                        }
                    },
                    {
                        title: "状态",
                        key: "status",
                        align: "center",
                        minWidth: 120,
                        render: (h, params) => {
                            let re = "";
                            if (params.row.status === 1) {
                                return h("div", [
                                    h(
                                        "Tag",
                                        {
                                            props: {
                                                type: "dot",
                                                color: "success"
                                            }
                                        },
                                        "正常启用"
                                    )
                                ]);
                            } else if (params.row.status === 0) {
                                return h("div", [
                                    h(
                                        "Tag",
                                        {
                                            props: {
                                                type: "dot",
                                                color: "error"
                                            }
                                        },
                                        "禁用"
                                    )
                                ]);
                            }
                        },
                        filters: [
                            {
                                label: "正常启用",
                                value: 1
                            },
                            {
                                label: "禁用",
                                value: 0
                            }
                        ],
                        filterMultiple: false,
                        filterMethod(value, row) {
                            if (value === 1) {
                                return row.status === 1;
                            } else if (value === 0) {
                                return row.status === 0;
                            }
                        }
                    },
                    {
                        title: "创建时间",
                            key: "createdAt",
                            minWidth: 150,
                            sortable: true,
                            sortType: "desc",
                            render: (h, params) => {
                            return h("div", moment(params.row.createdAt * 1000).format('YYYY-MM-DD HH:mm:ss'));
                        }
                    },
                    {
                        title: "操作",
                        key: "action",
                        width: 270,
                        align: "center",
                        fixed: "right",
                        render: (h, params) => {
                            let editBtn; let disableBtn; let enableBtn; let deleteBtn; let updatePasswordBtn;
                            if (this.permTypes.includes("edit")) {
                                editBtn = h(
                                    "Button",
                                    {
                                        props: {
                                            type: "primary",
                                            size: "small"
                                        },
                                        style: {
                                            marginRight: "5px"
                                        },
                                        on: {
                                            click: () => {
                                                this.edit(params.row);
                                            }
                                        }
                                    },
                                    "编辑"
                                );
                            }

                            if (this.permTypes.includes("enable")) {
                                enableBtn = h(
                                    "Button",
                                    {
                                        props: {
                                            type: "success",
                                            size: "small"
                                        },
                                        style: {
                                            marginRight: "5px"
                                        },
                                        on: {
                                            click: () => {
                                                this.enable(params.row);
                                            }
                                        }
                                    },
                                    "启用"
                                );
                            }

                            if (this.permTypes.includes("disable")) {
                                disableBtn = h(
                                    "Button",
                                    {
                                        props: {
                                            size: "small"
                                        },
                                        style: {
                                            marginRight: "5px"
                                        },
                                        on: {
                                            click: () => {
                                                this.disable(params.row);
                                            }
                                        }
                                    },
                                    "禁用"
                                );
                            }

                            if (this.permTypes.includes("delete")) {
                                deleteBtn = h(
                                    "Button",
                                    {
                                        props: {
                                            type: "error",
                                            size: "small"
                                        },
                                        on: {
                                            click: () => {
                                                this.remove(params.row);
                                            }
                                        }
                                    },
                                    "删除"
                                );
                            }

                            if (this.permTypes.includes("updatePassword")) {
                                updatePasswordBtn = h(
                                    "Button",
                                    {
                                        props: {
                                            type: "warning",
                                            size: "small"
                                        },
                                        style: {
                                            marginRight: "5px"
                                        },
                                        on: {
                                            click: () => {
                                                this.updatePassword(params.row);
                                            }
                                        }
                                    },
                                    "修改密码"
                                );
                            }

                            if (params.row.status === 1) {
                                return h("div", [
                                    editBtn,
                                    disableBtn,
                                    updatePasswordBtn,
                                    deleteBtn,
                                ]);
                            } else {
                                return h("div", [
                                    editBtn,
                                    enableBtn,
                                    updatePasswordBtn,
                                    deleteBtn,
                                ]);
                            }
                        }
                    }
                ],
                data: [],
                exportData: [],
                total: 0
            };
        },
        methods: {
            init() {
                this.accessToken = {
                    accessToken: this.getStore("accessToken")
                };
                this.initDepartmentData();
                this.getUserList();
                this.getParentList();
            },
            initDepartmentData() {
                initDepartment().then(res => {
                    if (res.success === true) {
                        res.result.forEach(function (e) {
                            if (e.isParent) {
                                e.value = e.id;
                                e.label = e.title;
                                e.loading = false;
                                e.children = [];
                            } else {
                                e.value = e.id;
                                e.label = e.title;
                            }
                        });
                        this.deleteDisableNode(res.result);
                        this.department = res.result;
                    }
                });
            },

            getParentList() {
                initDepartment(0).then(res => {
                    if (res.success === true) {
                        res.result.forEach(function (e) {
                            if (e.isParent) {
                                e.loading = false;
                                e.children = [];
                            }
                        });
                        this.deleteDisableNode(res.result);
                        this.dataDep = res.result;
                    }
                });
            },

            // 递归标记禁用节点
            deleteDisableNode(permData) {
                let that = this;
                permData.forEach(function (e) {
                    if (e.status === 0) {
                        e.title = "[已禁用] " + e.title;
                        e.disabled = true;
                    }
                    if (e.children && e.children.length > 0) {
                        that.deleteDisableNode(e.children);
                    }
                });
            },
            loadData(item, callback) {
                item.loading = true;
                loadDepartment(item.value).then(res => {
                    item.loading = false;
                    if (res.success === true) {
                        res.result.forEach(function (e) {
                            if (e.isParent) {
                                e.value = e.id;
                                e.label = e.title;
                                e.loading = false;
                                e.children = [];
                            } else {
                                e.value = e.id;
                                e.label = e.title;
                            }
                        });
                        this.deleteDisableNode(res.result);
                        item.children = res.result;
                        callback();
                    }
                });
            },
            loadDataTree(item, callback) {
                loadDepartment(item.id).then(res => {
                    if (res.success === true) {
                        res.result.forEach(function (e) {
                            if (e.isParent) {
                                e.loading = false;
                                e.children = [];
                            }
                        });
                        this.deleteDisableNode(res.result);
                        callback(res.result);
                    }
                });
            },
            selectTree(v) {
                if (v.length > 0) {
                    // 转换null为""
                    for (let attr in v[0]) {
                        if (v[0][attr] === null) {
                            v[0][attr] = "";
                        }
                    }
                    let str = JSON.stringify(v[0]);
                    let data = JSON.parse(str);
                    this.userForm.departmentId = data.id;
                    this.userForm.departmentTitle = data.title;
                }
            },
            clearSelectDep() {
                this.userForm.departmentId = "";
                this.userForm.departmentTitle = "";
            },
            handleChangeDep(value, selectedData) {
                // 获取最后一个值
                if (value && value.length > 0) {
                    this.searchForm.departmentId = value[value.length - 1];
                } else {
                    this.searchForm.departmentId = "";
                }
            },
            handleChangeUserFormDep(value, selectedData) {
                // 获取最后一个值
                if (value && value.length > 0) {
                    this.userForm.departmentId = value[value.length - 1];
                } else {
                    this.userForm.departmentId = "";
                }
            },
            changePage(v) {
                this.searchForm.pageNumber = v;
                this.getUserList();
                this.clearSelectAll();
            },
            changePageSize(v) {
                this.searchForm.pageSize = v;
                this.getUserList();
            },
            selectDateRange(v) {
                if (v) {
                    this.searchForm.startDate = v[0];
                    this.searchForm.endDate = v[1];
                }
            },
            getUserList() {
                this.selectCount = 0;
                // 多条件搜索用户列表
                this.loading = true;
                getUserListData(this.searchForm).then(res => {
                    this.loading = false;
                    if (res.success === true) {
                        this.data = res.result.records;
                        this.total = res.result.total;
                    }
                });
            },
            handleSearch() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getUserList();
            },
            handleSearchExportAll() {
                let str = JSON.stringify(this.searchForm);
                let params = JSON.parse(str);
                params.pageNumber = 1;
                params.pageSize = 1000000000;
                // 多条件搜索配置列表
                getUserListData(params).then(res => {
                    if (res.success === true) {
                        this.exportData = res.result.records;
                    }
                });
            },
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.selectDate = null;
                this.searchForm.startDate = "";
                this.searchForm.endDate = "";
                this.selectDep = [];
                this.searchForm.departmentId = "";
                // 重新加载数据
                this.getUserList();
            },
            changeSort(e) {
                this.searchForm.sort = e.key;
                this.searchForm.order = e.order;
                if (e.order === "normal") {
                    this.searchForm.order = "";
                }
                this.getUserList();
            },
            getRoleList() {
                getAllRoleList().then(res => {
                    if (res.success === true) {
                        this.roleList = res.result;
                    }
                });
            },
            initMeta() {
                let permTypes = this.$route.meta.permTypes;
                if (permTypes !== null && permTypes !== undefined) {
                    this.permTypes = permTypes;
                }
            },
            handleDropdown(name) {
                if (name === "exportData") {
                    if (this.selectCount <= 0) {
                        this.$Message.warning("您还未选择要导出的数据");
                        return;
                    }
                    this.$Modal.confirm({
                        title: "确认导出",
                        content: "您确认要导出所选 " + this.selectCount + " 条数据?",
                        onOk: () => {
                            this.$refs.exportTable.exportCsv({
                                filename: "管理员数据" + moment().format('YYYYMMDDHHmmss'),
                                columns: this.columns.filter((col, index) => index  >  1 && index < this.columns.length - 1),
                                data: this.exportData.map(item =>{
                                    item.createdAt = moment(item.createdAt * 1000).format('YYYY-MM-DD HH:mm:ss');

                                    if (item.status === 0) {
                                        item.status = "禁用";
                                    } else if (item.status === 1) {
                                        item.status = "启用";
                                    }

                                    if (item.type === 1) {
                                        item.type = "管理员";
                                    } else if (item.type === 0) {
                                        item.type = "普通用户";
                                    }

                                    if (item.sex === 1) {
                                        item.sex = "男";
                                    } else if (item.sex === 0) {
                                        item.sex = "女";
                                    }

                                    return item;
                                }),
                            });
                        }
                    });
                } else if (name === "exportDataAll") {

                    this.handleSearchExportAll();

                    this.$Modal.confirm({
                        title: "确认导出",
                        content: "您确认要导出全部数据?",
                        onOk: () => {

                            if (this.exportData.length <= 0) {
                                this.$Message.warning("没有数据需要导出");
                                return;
                            }

                            this.$refs.exportTable.exportCsv({
                                filename: "管理员数据" + moment().format('YYYYMMDDHHmmss'),
                                columns: this.columns.filter((col, index) => index  >  1 && index < this.columns.length - 1),
                                data: this.exportData.map(item =>{
                                    item.createdAt = moment(item.createdAt * 1000).format('YYYY-MM-DD HH:mm:ss');

                                    if (item.status === 0) {
                                        item.status = "禁用";
                                    } else if (item.status === 1) {
                                        item.status = "启用";
                                    }

                                    if (item.type === 1) {
                                        item.type = "管理员";
                                    } else if (item.type === 0) {
                                        item.type = "普通用户";
                                    }

                                    if (item.sex === 1) {
                                        item.sex = "男";
                                    } else if (item.sex === 0) {
                                        item.sex = "女";
                                    }

                                    return item;
                                }),
                            });
                        }
                    });
                } else if (name === "refresh") {
                    this.getUserList();
                }
            },
            cancelUser() {
                this.userModalVisible = false;
            },
            cancelPassword() {
                this.passwordModalVisible = false;
            },
            submitUser() {
                this.$refs.userForm.validate(valid => {
                    if (valid) {
                        if (this.modalType === 0) {
                            // 添加用户 避免编辑后传入id
                            delete this.userForm.id;
                            delete this.userForm.status;
                            if (
                                this.userForm.password == "" ||
                                this.userForm.password == undefined
                            ) {
                                this.errorPass = "密码不能为空";
                                return;
                            }
                            if (this.userForm.password.length < 6) {
                                this.errorPass = "密码长度不得少于6位";
                                return;
                            }
                            this.submitLoading = true;
                            addUser(this.userForm).then(res => {
                                this.submitLoading = false;
                                if (res.success === true) {
                                    this.$Message.success("操作成功");
                                    this.getUserList();
                                    this.userModalVisible = false;
                                }
                            });
                        } else {
                            // 编辑
                            editUser(this.userForm).then(res => {
                                this.submitLoading = false;
                                if (res.success === true) {
                                    this.$Message.success("操作成功");
                                    this.getUserList();
                                    this.userModalVisible = false;
                                }
                            });
                        }
                    }
                });
            },

            submitPassword() {
                this.$refs.passwordForm.validate(valid => {
                    if (valid) {
                        // 编辑
                        updateAdminPassword(this.passwordForm).then(res => {
                            this.submitLoading = false;
                            if (res.success === true) {
                                this.$Message.success("操作成功");
                                this.getUserList();
                                this.passwordModalVisible = false;
                            }
                        });
                    }
                });
            },

            add() {
                this.modalType = 0;
                this.modalTitle = "添加用户";
                this.$refs.userForm.resetFields();
                this.userModalVisible = true;
            },
            edit(v) {
                this.modalType = 1;
                this.modalTitle = "编辑用户";
                this.$refs.userForm.resetFields();
                // 转换null为""
                for (let attr in v) {
                    if (v[attr] === null) {
                        v[attr] = "";
                    }
                }
                let str = JSON.stringify(v);
                let userInfo = JSON.parse(str);
                this.userForm = userInfo;
                let selectRolesId = [];
                this.userForm.roles.forEach(function (e) {
                    selectRolesId.push(e.id);
                });
                this.userForm.roles = selectRolesId;
                this.userModalVisible = true;
            },
            updatePassword(v) {
                this.$refs.passwordForm.resetFields();
                this.passwordForm.id = v.id;
                this.passwordModalVisible = true;
            },
            enable(v) {
                this.$Modal.confirm({
                    title: "确认启用",
                    content: "您确认要启用用户 " + v.username + " ?",
                    onOk: () => {
                        enableUser(v.id).then(res => {
                            if (res.success === true) {
                                this.$Message.success("操作成功");
                                this.getUserList();
                            }
                        });
                    }
                });
            },
            disable(v) {
                this.$Modal.confirm({
                    title: "确认禁用",
                    content: "您确认要禁用用户 " + v.username + " ?",
                    onOk: () => {
                        disableUser(v.id).then(res => {
                            if (res.success === true) {
                                this.$Message.success("操作成功");
                                this.getUserList();
                            }
                        });
                    }
                });
            },
            remove(v) {
                this.$Modal.confirm({
                    title: "确认删除",
                    content: "您确认要删除用户 " + v.username + " ?",
                    onOk: () => {
                        deleteUser(v.id).then(res => {
                            if (res.success === true) {
                                this.$Message.success("删除成功");
                                this.getUserList();
                            }
                        });
                    }
                });
            },
            dropDown() {
                if (this.drop) {
                    this.dropDownContent = "展开";
                    this.dropDownIcon = "ios-arrow-down";
                } else {
                    this.dropDownContent = "收起";
                    this.dropDownIcon = "ios-arrow-up";
                }
                this.drop = !this.drop;
            },
            showSelect(e) {
                this.exportData = e;
                this.selectList = e;
                this.selectCount = e.length;
            },
            clearSelectAll() {
                this.$refs.table.selectAll(false);
            },
            delAll() {
                if (this.selectCount <= 0) {
                    this.$Message.warning("您还未选择要删除的数据");
                    return;
                }
                this.$Modal.confirm({
                    title: "确认删除",
                    content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
                    onOk: () => {
                        let ids = "";
                        this.selectList.forEach(function (e) {
                            ids += e.id + ",";
                        });
                        ids = ids.substring(0, ids.length - 1);
                        deleteUser(ids).then(res => {
                            if (res.success === true) {
                                this.$Message.success("删除成功");
                                this.clearSelectAll();
                                this.getUserList();
                            }
                        });
                    }
                });
            },
        },
        mounted() {
            this.init();
            this.initMeta();
            this.getRoleList();
        }
    };
</script>
